<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>部署库</title>
		<link rel="stylesheet" href="../css/css.css">
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<link type="text/css" rel="Stylesheet" href="../css/style.css" />
		<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="../js/messagecenter.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/initPage.js"></script>
		<style type="text/css">
		.app_text{
		  color:#04A0E9;
		  cursor:pointer;
		  margin-left:15px;
		}
		.app_text1{
			color:#04A0E9;
		  	cursor:pointer;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}
		.app_del{
		  cursor:pointer;
		  margin-left:20px;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 14px;
		}
		.text_name{
			text-align:left;
			text-indent: 14px;
		}
		.app_no{
			    background-color: #83BE00;
			    width: 50px;
			    height: 18px;
			    margin-left: 16%;
			    text-indent: 4px;
			    border-radius: 4px;
			    color: #FFFFFF;
		        font-weight: 600;
   			 	padding-top: 2px;
		}
		#page ul li a{
			background-color: #009EE7;
			margin:0 10px;
		}
	</style>
	</head>
	<body>
	<div class="left_content">

		<div class="left_block1">
			<div class="left_logo"></div>
			<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
			<div class="left_icons">
				<div class="left_icon1"></div>
				<div class="left_icon2"></div>
				<div class="left_icon3"></div>
			</div>
		</div>
		<div class="left_block2">
			<div class="left_menu">拓扑文件库</div>
			<div class="left_menu">逻辑预案库</div>
			<div class="left_menu">部署库</div>
			<div class="left_menu">监控</div>
			<div class="left_menu">其他</div>
		</div>
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="login" onclick="test();">登录</button>
		</div>
	</div>
	<div class="right_content" >
			<form id="form1">
					<input type="hidden" id="curIndex" value="0"/>
					<input type="hidden" id="maxPage" value="0"/>
					<input type="hidden" id="curId" name="curId">
					<div class="top-bar">
						<div style="float:left;">部署库<br><span  class="text_color"  style="font-size: 13px;">Logical&nbsp;application&nbsp;plan&nbsp;library</span></div>
						<div class="top_input" style="float:right; height:36px;margin-top: 12px;">
							<button class="add" type="button" style="margin-left:20px;border-radius: 5px;">+添加</button>
							<button class="search" type="button">搜索</button>
							<input class="s_input" id="condition" type="text" name="" placeholder="输入关键字搜索"/>
						</div>
					</div>
					<div class="table-box" >
						<div class="headerTableDiv">
							<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
								<colgroup>
									<col width="10%">
									<col width="15%">
									<col width="8%">
									<col width="12%">
									<col width="12%">
									<col width="18%">
									<col width="25%">
								</colgroup>
								<tr>
									<td>
										<div class="text_name" style="">编号</div>
										<div class="text_color">Serial&nbsp;number</div>
									</td>
									<td>
										<div class="text_name" style="">名称</div>
										<div class="text_color">The&nbsp;application&nbsp;name</div>
									</td>
									<td>
										<div class="text_name" style="">创建人</div>
										<div class="text_color">founder</div>
									</td>
									<td>
										<div class="text_name" style="">创建时间</div>
										<div class="text_color">Creation&nbsp;time</div>
									</td>
									<td>
										<div class="text_name" style="">修改时间</div>
										<div class="text_color">Modify&nbsp;the&nbsp;time</div>
									</td>
									<td>
										<div class="text_name" style="">备注</div>
										<div class="text_color">note</div>
									</td>
									<td>
										<div class="text_name"style="text-indent: 80px;">操作</div>
										<div class="text_color" style="text-indent: 80px;">operation</div>
									</td>
								</tr>
							</table>
						</div>
						<div class="contentTableDiv">
							<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
								<colgroup>
									<col width="10%">
									<col width="15%">
									<col width="8%">
									<col width="12%">
									<col width="12%">
									<col width="16%">
									<col width="27%">
								</colgroup>
							<tbody id="contentTableTbody"></tbody>
							</table>
						</div>
				</div>
				<!-- 分页 -->
				<div class="page-split">

					<div id="page"></div>
					<div class="page_count text_color" style="float:right;font-size:13px;"></div>
				</div>
				<!-- 底部 -->
				<div class="bottom">
					<div class="conn">
			          <div>连接服务器</div>
			          <div style="color:#DBDDDC;">Connection&nbsp;Server</div>
			        </div>

					 <div class="server" >
					 	<div style="width:49%;">
					        <div style="margin-left:20px;"><img class="img " src="../images/bsk/main.png"/></div>
					 		<div class="bt">
						 		<div style="width:100%;margin:20px 0 0 15px;color:#00A0E8;">主服务器</div>
						 		<div class="bt_fl">
							 		<div >编号:</div>
							 		<input type="text" value="188.88.25.86" style="width:65%;">
						 		</div>
						 		<div class="bt_fl" style="margin-left:50%">
							 		<div>名称:</div>
							 		<input type="text" value="8001" style="width:50%;">
						 		</div>
					 		</div>
					 	</div>
					 	<div style="width:49%;margin-left:5px;">
					        <div style="margin-left:20px;"><img class="img " src="../images/bsk/backup.png"/></div>
					 		<div class="bt" style="border: 1px solid #667184;">
						 		<div style="width:100%;margin:20px 0 0 15px;">备服务器</div>
						 		<div class="bt_fl" >
							 		<div>编号:</div>
							 		<input type="text" value="18.9.9.9" style="width:65%;">
						 		</div>
						 		<div class="bt_fl" style="margin-left:50%">
							 		<div>名称:</div>
							 		<input type="text" value="9" style="width:50%;">
						 		</div>
					 		</div>
					 	</div>
					</div>
			      <div class="bt-btn" style="position: absolute;width:100%;bottom:20px;left:10px;">
			      	<button class="btn-s" type="button" onclick="connect();">连接</button>
			      	<button class="btn-s save" type="button" onclick="disconnect();">断开</button>
			      </div>
				</div>
				<!--添加-->
				<div class="addBsk">
					<div class="add_block">
						<div class="add_header">新增部署库</div>
						<div class="add_content">
							<ul class="control-group">
								<li class="clearfix" style="margin-top:5px;">
									<label style="width:120px;">名称：</label>
									<input id="topName" style="border:1px solid #ddd;height: 28px;margin-top: 5px;width: 220px;"/>
								</li>
								<li class="clearfix" style="margin-top:5px;">
									<label style="width:120px;">编号：</label>
									<input id="topNo" style="border:1px solid #ddd;height: 28px;margin-top: 5px;width: 220px;"/>
								</li>
								<li class="clearfix" style="margin-top:5px;">
									<label style="width:120px;">备注：</label>
									<input id="topRemark" style="border:1px solid #ddd;height: 28px;margin-top: 5px;width: 220px;"/>
								</li>
							</ul>
						</div>
						<div class="add_footer">
							<button type="button" onclick="disexcute()">取消</button>
							<button type="button" style="margin-left:20px;" onclick="addSave()">保存</button>
						</div>
					</div>

				</div>

				<!-- 弹窗 -->
				<div class="pop_content" id="showInfo">
				<div class="pop_block">
					<div class="pop_barInfo" >
						<div style="font-size: 18px;">部署表信息查看</div>
						<span>deploy&nbsp;the&nbsp;table&nbsp;information&nbsp;to&nbsp;view</span>
					</div>
					<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop();"></div>
					<div class="headerTableDiv2">
						<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
							<colgroup>
								<col width="25%">
								<col width="25%">
								<col width="25%">
								<col width="25%">
							</colgroup>
							<tr>
								<td><div>序号</div></td>
								<td><div>APP名称</div></td>
								<td><div>APP_ID</div></td>
								<td><div>RIO物理地址</div></td>
							</tr>
						</table>
					</div>
					<div class="contentTableDiv2">
						<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
							<colgroup>
								<col width="25%">
								<col width="25%">
								<col width="25%">
								<col width="25%">
							</colgroup>
							<tbody id="popTbody"></tbody>
						</table>
					</div>
				</div>
			</div>
			</form>
		</div>

	</body>
	<script type="text/javascript">
	function addSave(){
	    alert("新增保存");
	    var url="";
	    var params=[


		];
	    $.post(url,params,"JSON").done(function(data){
	        if(data){
	            alert("添加成功");
	            window.location.href="../html/bsk.html";
			}
		});
	}
	function disexcute(){
	    $(".addBsk").hide();
	}
	$(".add").on("click",function(){
	    alert("新增");
	    $(".addBsk").show();
	});

	$(".search").on("click",function(){
		alert("搜索");
		var curIndex = $("#curIndex").val();
		var name_like = $("#condition").val();
		getList(curIndex,name_like);
	});


	$(function(){
       /* var curIndex = $("#curIndex").val();
        getList(curIndex);*/


		var dataArr = [];
	 	for(i=1;i<=20;i++){
			var dataJson = {};
			dataJson.id = i;
			if(i<10){
				dataJson.no = "NO.0"+i;
			}else{
				dataJson.no = "NO."+i;
			}
			dataJson.name = "string"+i;
			dataJson.creator = "string"+i;
			dataJson.cdt = i;
			dataJson.lastModifyTime = "2018-04-10 05:22:20.636";
			dataJson.remark = "string"+i;
			dataArr.push(dataJson);
		}
        addData(dataArr,990,25);

	});
    function Update(id){
        alert("跳转到物理视图绑定");
        alert(id);
        var url="deploy_topology/edit";
        if(id!=null) {
           /* $.post(url, {id: id}, "JSON").done(function () {
            });*/
        }else{
            aler("请选择id");
        }
        window.location.href="../html/acBindors.html"
    }
    function Delete(id){
        alert("删除");
        var url="deploy_topology/delete"
        if(id!=null) {
            $.post(url, {id: id}, "JSON").done(function (data) {
                if (data) {
                    getList(0);
                }
            });
        }else {
            alert("请选择要删除的id");
        }
    }
    function send(){
        alert("下发到网管");

    }
   /* function test(){
        var url = "/bdk/deploy_topology/query";
        var param = {pageable:{page:0,start:0,size:25}};
        $.post(url,param,"JSON").done(function(data){
           alert(JSON.stringify(data));
        }).fail(function(data){
            alert(JSON.stringify(data));
        });
	}*/
	function getList(curIndex,name_like){
        var url = "/deploy_topology/query";
        $("#curIndex").val(curIndex);
        var param = {"pageable:page":0,'pageable.start':0,'pageable.size':25};

        // 搜索值为空时，需要屏蔽(params.name_like)此参数
        if(0 != name_like.length)
		{
		    param["params.name_like"] = name_like;
		}
        $.post(url,param,"JSON").done(function(data){
            if(data){
                var dataList = data.data;
                   if(dataList&&dataList.length>0){
                    addData(dataList,data.total,25)
                }
            }
        });
	}

	function addData(data,total,pageSize){
	    var maxPage = Math.ceil(total/pageSize);
	    pageCal(1,maxPage,total);
	    $("#maxPage").val(maxPage);
	    $("#contentTableTbody").empty();
		var html = '';
		$.each(data,function(k,v){
			html += '<tr>';
			html += '<td><div  class="app_no">'+v.no+'</div><input type="hidden" id="objId" value="'+v.id+'"></td >';
			html += '<td><div class="app_text1" style="cursor:default;">'+v.name+'</div></td>';
			html += '<td>'+v.creator+'</td>';
			html += '<td style="text-indent: 0px;"><div class="text_color">'+v.cdt+'</div></td>';
			html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:15px;">'+v.lastModifyTime+'</div></td>';
			html += '<td ><div>'+v.remark+'</div></td>';
			html += '<td style="text-indent: 0px;">';
			html += '<a class="app_text" onclick="open_pop('+v.id+');">查看部署表</a>';
			html += '<a class="app_text" onclick="Update('+v.id+');">编辑</a>';
			html += '<a class="app_del" onclick="Delete('+v.id+');">删除</a>';
			html += '<button class="btn-s" style="margin-left:20px;">下发到网管</button>';
			html += '</td>';
			html += '</tr>';
		});
		$("#contentTableTbody").append(html);
	}
	function addDataPop(data){
		$("#popTbody").empty();
		var html = '';
		$.each(data,function(k,v){
			html += '<tr>';
			html += '<td>'+v.no+'</td>';
			html += '<td>'+v.name+'</td>';
			html += '<td>'+v.appId+'</td>';
			html += '<td>'+v.addr+'</td>';
			html += '</tr>';
		});
		$("#popTbody").append(html);
	}

	function open_pop(id){
		/* var url = 'deploy_topology/get_by_id';
		var param = {id:id};
		$.post(url,param,"JSON").done(function(data){
			if(data&&data.length>0){
				addDataPop(data)
			}
		}); */
		 var dataArr = [];
		for(i=1;i<=10;i++){
			var dataJson = {};
			dataJson.no = i;
			dataJson.name = "OX8E_"+i;
			dataJson.appId = i;
			dataJson.addr = "141";
			dataArr.push(dataJson);
		}
		addDataPop(dataArr);
		$("#showInfo").show();
		tableSum2();
	}
	function exit_pop(){
		$("#showInfo").hide();
	}
	function tableSum() {
		$(".contentTableDiv").scrollTop(10);// 控制滚动条下移10px
		if ($(".contentTableDiv").scrollTop() > 0) {
			var scrollWidth = getScrollbarWidth();
			$(".contentTableDiv").css("right",(20-scrollWidth)+"px");
		} else {
			$(".contentTableDiv table").css("width", "100%");
		}
		$(".contentTableDiv").scrollTop(0);// 滚动条返回顶部
	}
	function tableSum2() {
		$(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
		if ($(".contentTableDiv2").scrollTop() > 0) {
			var scrollWidth = getScrollbarWidth();
			$(".contentTableDiv2").css("right",(30-scrollWidth)+"px");
		} else {
			$(".contentTableDiv2 table").css("width", "100%");
		}
		$(".contentTableDiv").scrollTop(0);// 滚动条返回顶部
	}
	$(function(){
		tableSum();
		tableSum2();
	});

	$(window).resize(function() {
		tableSum();
		tableSum2();
	});

	function getScrollbarWidth() {
	    var odiv = document.createElement('div'),//创建一个div
	        styles = {
	            width: '100px',
	            height: '100px',
	            overflowY: 'scroll'//让他有滚动条
	        }, i, scrollbarWidth;
	    for (i in styles) odiv.style[i] = styles[i];
	    document.body.appendChild(odiv);//把div添加到body中
	    scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
	    odiv.remove();//移除创建的div
	    return scrollbarWidth;//返回滚动条宽度
	}

	function pageCal(curIndex,pageCount,totalCount){
		pageUtil.initPage('page',{
					totalCount:pageCount,//总页数，一般从回调函数中获取。如果没有数据则默认为1页
					curPage:curIndex,//初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
					showCount:9,//分页栏显示的数量
					pageSizeList:[5,10,15,20,25,30],//自定义分页数，默认[5,10,15,20,50]
					defaultPageSize:1,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
					isJump:false,//是否包含跳转功能，默认false
					isPageNum:false,//是否显示分页下拉选择，默认false
					isPN:true,//是否显示上一页和下一面，默认true
					isFL:false,//是否显示首页和末页，默认true
					jump:function(curPage,pageSize){//跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
						console.log(curPage,pageSize);
					},
				});
		$(".page-split .page_count").html('共'+totalCount+'条/'+pageCount+'页');
	}
	function connect(){
	    alert("连接");
	}
	function disconnect(){
	    alert("断开");
        var url="deploy_topology"
        var params="";
       /* $.post(url,params,"JSON").done(function(data){
            if(data){
				getList(0);
            }
        });*/
	}
	</script>
</html>
